
/* globals svgEditor */
import { isValidUnit } from '../../common/units.js'
import BottomPanel from '../panels/BottomPanel.js'
import { jGraduate } from '../components/jgraduate/jQuery.jGraduate.js'
import imagePropertiesDialogHTML from './cubecolor.html'

const template = document.createElement('template')
template.innerHTML = imagePropertiesDialogHTML
/**
 * @class SeImgPropDialog
 */
export class SeCube extends HTMLElement {
  /**
    * @function constructor
    */
  constructor() {
    super()
    // create the shadowDom and insert the template
    this.eventlisten = false
    this.BottomPanel = new BottomPanel(this)
    this._shadowRoot = this.attachShadow({ mode: 'open' })
    this._shadowRoot.append(template.content.cloneNode(true))
    this.$dialog = this._shadowRoot.querySelector('#svg_createment')
    this.$fill_color_front  = this._shadowRoot.querySelector('#fill_color_front')

   


  }

  /**
   * @function init
   * @param {any} name
   * @returns {void}
   */
  init(i18next) {
   

  }

  /**
   * @function observedAttributes
   * @returns {any} observed
   */
  static get observedAttributes() {
    return ['dialog']
  }

  /**
   * @function attributeChangedCallback
   * @param {string} name
   * @param {string} oldValue
   * @param {string} newValue
   * @returns {void}
   */
  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) return
    switch (name) {
      case 'dialog':
        if (newValue === 'open') {
          this.$dialog.open()
          this.initCube();
        } else {
          this.$dialog.close()
        }
        break
      default:
        super.attributeChangedCallback(name, oldValue, newValue)
        break
    }
  }

  initCube(){
    const { i18next } = svgEditor
    const {$id} = svgEditor.svgCanvas
    const { curConfig } = svgEditor.configObj
    this.$fill_color_front.setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initFill.color }))
    this.$fill_color_front.addEventListener('change', (evt) =>  this.BottomPanel.handleColorPicker.bind(this)('fill', evt,true,'front'))
    this.$fill_color_front.init(i18next)

  }

  /**
   * @function get
   * @returns {any}
   */


  /**
   * @function get
   * @returns {any}
   */
  get dialog() {
    return this.getAttribute('dialog')
  }

  /**
   * @function set
   * @returns {void}
   */
  set dialog(value) {
    this.setAttribute('dialog', value)
  }

  /**
   * @function connectedCallback
   * @returns {void}
   */
  connectedCallback() {
    const onSaveHandler = () => {
      const closeEvent = new CustomEvent('change', {
        detail: {
          dialog: 'close',
          PrimitivesType: this.$PrimitivesType.value,
          PrimitivesDesc: this.$PrimitivesDesc.value

        }
      })
      this.dispatchEvent(closeEvent)
    }
    const onCancelHandler = () => {
      const closeEvent = new CustomEvent('change', {
        detail: {
          dialog: 'closed'
        }
      })
      this.dispatchEvent(closeEvent)
    }
   
    // svgEditor.$click(this.$saveBtn, onSaveHandler)
    // svgEditor.$click(this.$cancelBtn, onCancelHandler)
    // this.$dialog.addEventListener('close', onCancelHandler)
    // this.eventlisten = true

  }
}

// Register
customElements.define('se-cube-dialog', SeCube)
